import { useState, useEffect, useMemo, useContext } from 'react'
import { resourcePath } from '../../../utils/resource';
import GlobalContext from '../../../utils/GlobalContext';
const panels = [];
export default function PanelRight(props) {
    const { children } = props;
    const key = useMemo(() => {
        return `panel-${Math.random().toString().substring(3)}`
    }, [])

    const { setGlobalConfig, currentPanelKey } = useContext(GlobalContext);

    useEffect(() => {
        setGlobalConfig(config => {
            return {
                ...config,
                currentPanelKey: key
            }
        })
    }, [setGlobalConfig, key]);

    if (currentPanelKey !== key) {
        return null;
    }
    return <div style={{
        position: 'absolute',
        right: 0,
        width: 670,
        top: 0,
        bottom: 0,
        background: `url(${resourcePath.panelRightPng})`,
        zIndex: 1,
        pointerEvents: 'none',
        backgroundSize: "100% 100%"
    }}>{children}
    </div>
}